<template>
  <div style="display: inline-block">
    <Divider plain orientation="left">标题模板</Divider>
    <Tooltip
      :content="item.label"
      v-for="(item, i) in list"
      :key="`${i}-bai1-button`"
      placement="top"
    >
      <img
        class="tmpl-img"
        :alt="item.label"
        v-lazy="item.src"
        @click="getTempData(item.tempUrl)"
      />
    </Tooltip>
  </div>
</template>

<script setup>
import useSelect from '@/hooks/select';
// import { downFontByJSON } from '@/utils/utils';
import { v4 as uuid } from 'uuid';
import axios from 'axios';
import { Spin } from 'view-ui-plus';

const repoSrc = import.meta.env.APP_REPO;
const { fabric, canvasEditor } = useSelect();
const list = [
  {
    label: '字体',
    tempUrl: `${repoSrc}/temp-editor-data/font/1.json`,
    src: `${repoSrc}/temp-editor-data/font/1.png`,
  },
  {
    label: '字体',
    tempUrl: `${repoSrc}/temp-editor-data/font/2.json`,
    src: `${repoSrc}/temp-editor-data/font/2.png`,
  },
  {
    label: '字体',
    tempUrl: `${repoSrc}/temp-editor-data/font/3.json`,
    src: `${repoSrc}/temp-editor-data/font/3.png`,
  },
  {
    label: '字体',
    tempUrl: `${repoSrc}/temp-editor-data/font/4.json`,
    src: `${repoSrc}/temp-editor-data/font/4.png`,
  },
  {
    label: '字体',
    tempUrl: `${repoSrc}/temp-editor-data/font/5.json`,
    src: `${repoSrc}/temp-editor-data/font/5.png`,
  },
];

// 插入文件
const insertFile = (str) => {
  Spin.show((h) => h('div', '正在加载字体，您耐心等候...'));
  const obj = JSON.parse(str);
  obj.id = uuid();
  new fabric.Textbox.fromObject(obj, (e) => {
    canvasEditor.canvas.add(e);
    e.center();
    canvasEditor.canvas.setActiveObject(e);
    Spin.hide();
  });
};
// 获取模板数据
const getTempData = (tmplUrl) => {
  Spin.show((h) => h('div', '加载数据中...'));
  const getTemp = axios.get(tmplUrl);
  getTemp.then((res) => {
    insertFile(JSON.stringify(res.data));
  });
};
</script>

<style scoped lang="less">
.tmpl-img {
  width: 86px;
  cursor: pointer;
  margin-right: 5px;
}
</style>
